import React from 'react'
import { Input, Button, List } from 'antd'
import store from '../../store'
import { useEffect } from 'react'
import { useState } from 'react'

import {changeInputAction , addItemAction ,deleteItemAction} from '../../store/actionCreators'
const TodoList = () => {

    const [count,setCount]=useState(0)
    // const state=store.getState()
    const changeInputValue=(e)=>{
        // console.log(e.target.value);
        const action=changeInputAction(e.target.value)
        store.dispatch(action)
        setCount(count+1)
    }
    
    const clickBtn=()=>{
        const action=addItemAction()
        store.dispatch(action)
        setCount(count+1)
    }
    
    const deleteItem=(index)=>{
        console.log(count,"object");
        const action=deleteItemAction(index)
        store.dispatch(action)
        setCount(count+1)
    }
    useEffect(()=>{
        console.log('lll');
        store.subscribe(()=>{
            store.getState()
        })
    },[count])
    return (
        <div style={{ margin: '10px' }}>
            <div>
                <Input 
                    style={{ width: '250px', marginRight: '10px' }} 
                    onChange={changeInputValue}
                    value={store.getState().inputValue}
                />
                <Button type="primary"
                    onClick={clickBtn}
                >增加</Button>
            </div>
            <div style={{ margin: '10px', width: '300px' }}>
                <List
                    bordered
                    dataSource={store.getState().list}
                    renderItem={(item,index) => (<List.Item key={index} onClick={deleteItem.bind(index)}>{item}</List.Item>)}
                />
            </div>
        </div>
    )
}

export default TodoList
